<script setup lang="ts">
import { computed, ref } from 'vue'
import { useAppStore } from '@/store/modules/app'
import { ConfigGlobal } from '@/components/ConfigGlobal'
import { useDesign } from '@/hooks/web/useDesign'
import { useUserStore } from '@/store/modules/user'
import { getDictionaryListApi } from '@/api/common'
import { useStorage } from '@/hooks/web/useStorage'
import { isLockScreenApi } from '@/api/system/user'
import { getSystemUserSettingApi } from '@/api/system/userSetting'
import { getSystemSettingApi } from '@/api/system/setting'
import { SystemSetting } from '@/api/system/setting/types'
const { getStorage, setStorage } = useStorage()
const { getPrefixCls } = useDesign()

const prefixCls = getPrefixCls('app')

const appStore = useAppStore()
const userStore = useUserStore()

const currentSize = computed(() => appStore.getCurrentSize)

const greyMode = ref(false)

const isLockScreen = async () => {
  const isLock = getStorage('isLock')
  if (isLock === undefined || isLock === null) {
    console.log('getStorage===isLock===', isLock)
    const res = await isLockScreenApi()
    if (res) {
      console.log('isLock===', res)
      setStorage('isLock', res.data)
    }
  }
}
isLockScreen()
const getSystemUserSetting = async () => {
  const res = await getSystemUserSettingApi()
  if (res) {
    appStore.setUserConfig(res.data)
  }
}

const getDictionaryList = async () => {
  const res = await getDictionaryListApi()
  if (res) {
    appStore.setDictionaryList(res.data)
  }
}
getDictionaryList()

const getSystemConfig = async () => {
  const res = await getSystemSettingApi()
  if (res) {
    const systemSetting: SystemSetting = res.data
    greyMode.value = systemSetting.openGreyMode
    appStore.setSystemConfig(res.data)
  }
}
getSystemConfig()
if (userStore.getUserInfo) {
  getSystemUserSetting()
}
</script>

<template>
  <ConfigGlobal :size="currentSize">
    <RouterView :class="greyMode ? `${prefixCls}-grey-mode` : ''" />
  </ConfigGlobal>
</template>

<style lang="less">
@prefix-cls: ~'@{vueNamespace}-app';

.size {
  width: 100%;
  height: 100%;
}

html,
body {
  padding: 0 !important;
  margin: 0;
  overflow: hidden;
  .size;

  #app {
    .size;
  }
}

.@{prefix-cls}-grey-mode {
  filter: grayscale(100%);
}
</style>
